<template>
    <div class="report-container">
        <div class="search-box">
            <div class="search-box-sub">
              <span class="lable-text">{{$t('report.report_type')}}</span>
              <el-radio-group v-model="type" @change="changeType" style="margin-top: 3px;">
                <el-radio label="1" :disabled="flag" >{{$t('report.dailyReport')}}</el-radio>
                <el-radio label="2" :disabled="flag">{{$t('report.monthReport')}}</el-radio>
                <el-radio label="3" :disabled="flag">{{$t('report.yearReport')}}</el-radio>
              </el-radio-group>
            </div>
            <div class="search-box-sub">
              <span class="lable-text">{{$t('report.selectTime')}}</span>
              <el-date-picker
                v-model="time"
                type="date"
                v-show="type=='1'"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                :placeholder="$t('selectDate')">
              </el-date-picker>
              <el-date-picker
                v-model="time"
                type="month"
                v-show="type=='2'"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
                :placeholder="$t('selectMonth')">
              </el-date-picker>
              <el-date-picker
                v-model="time"
                type="year"
                v-show="type=='3'"
                value-format="yyyy"
                :picker-options="pickerOptions"
                :placeholder="$t('selectYear')">
              </el-date-picker>
            </div>
            <div class="search-box-sub">
              <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
              <el-button @click='exportReport(1)' >{{$t('export')}}</el-button>
              <el-button @click='exportReport(2)' >{{$t('report.clockReport')}}</el-button>
              <el-button @click='exportReport(3)' v-show="detailVisible">{{$t('report.clockReport_rd')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading" row-key='sid' :data="dataRows" border :height="tableHeight" stripe @selection-change="handleSelectionChange($event)" :column='column'>
            <template #type="{data}">
              {{returnTypeCode(data.type)}}
            </template>
            <template #yield="{data}">
              {{data.yield | num2}}
            </template>
            <template #inverterStatus="{data}">
              {{inverterStatusFormatter(data)}}
            </template>
            <template #isBatteryAlarm="{data}">
              {{batteryStatusFormatter(data)}}
            </template>
            
            
        </baseTable>
        <el-dialog
            :title="$t('export')"
            :visible="visibleShow2"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setVisibleShow2',false)}">
            <el-form label-width="120px" >
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item :label="$t('index.timeHorizon')" v-show="exportType!=2" label-width="150px">
                            <el-date-picker
                                v-model="dateRange.beginTime"
                                type="date"
                                :placeholder="$t('index.startTime')"
                                value-format='yyyy-MM-dd'
                                :clearable='false'
                                style="width: 150px;"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                v-model="dateRange.endTime"
                                type="date"
                                :placeholder="$t('index.endTime')"
                                value-format='yyyy-MM-dd'
                                :clearable='false'
                                style="width: 150px;"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item :label="$t('index.timeHorizon')" v-show="exportType==2"  label-width="200px">
                            <el-date-picker
                                v-model="beginTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :clearable='false'
                                :picker-options="pickerOptions"
                                :placeholder="$t('selectDate')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleShow2',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="exportFun()">{{$t('export')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            flag:false,
            inverterSN:sessionStorage.getItem("selRow_inverter_sn"),
            wifiSn:sessionStorage.getItem('selRow_wifi_sn'),
            snType:sessionStorage.getItem('selRow_sn_type'),
            inverterType:sessionStorage.getItem('selRow_inverterType'),
            phaseType:sessionStorage.getItem('selRow_phase_type'),//1单相  3三相
            batteryType:sessionStorage.getItem('selRow_battery_type'),
            userId:sessionStorage.getItem('selRow_userId'),
            siteId:sessionStorage.getItem('selRow_siteId'),
            firmId:sessionStorage.getItem('selRow_firmId'),
            loadType:sessionStorage.getItem("selRow_load_type"),
            lan:localStorage.getItem('language'),

            beginTime:moment().format("YYYY-MM-DD"),
            dateRange:{
                beginTime:moment().format("YYYY-MM-DD"),
                endTime:moment().format("YYYY-MM-DD")
            },
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            currentTime:this.$options.filters['dateFormat'](new Date()),
            webTime:this.$options.filters['dateFormat'](new Date(),'YYYY,MM,DD'),
            type:'1',
            exportType:1,
            time:new Date(),
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            typeList:[],
            selectCountryData:[],
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[],
            column_day:[],
            column_month:[{
                title: this.$t('report.reportAnalys.js_report_daily'),
                value: 'time',
            },{
                title: this.$t('report.reportAnalys.js_report_currentYield')+'(kWh)',
                value: 'yield',
                slot:'yield'
            },{
                title: this.$t('index.toGrid')+'(kWh)',
                value: 'feedinEnergy',
            },{
                title: this.$t('index.powerConsumption')+'(kWh)',
                value: 'consumeEnergy',
            }],
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            detailVisible:false,
            inverterTypeData:[],
            batteryStatusData:[],
            tableHeight:''
        };
    },
    computed: {
        visibleShow2(){
            return this.$store.state.sysStore.visibleShow2
        }
    },
    watch: {
        
    },
    created() {

    },
    mounted() {
        let that = this
        this.tableHeight =document.body.offsetHeight-180
        window.addEventListener('resize',() => {
            that.tableHeight = document.body.offsetHeight-180
        }, false)
        this.getDictionaryBatch()
        this.getTypeModelBySN()
    },
    methods: {
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'BATTERY_RUN_STATUS,'+'INVERTER_STATUS_'+this.inverterType,
                lang:localStorage.getItem('lang')
            })
            this.inverterTypeData = res['INVERTER_STATUS_'+this.inverterType]
            this.batteryStatusData = res['BATTERY_RUN_STATUS']
            console.log(res,'---------battert---------')
        },
        inverterStatusFormatter(data) {
            var result='-';
            this.inverterTypeData.forEach(obj=>{
                if(obj.value == data.inverterStatus){
                    result = obj.code;
                }
            })
            return result;
        },
        batteryStatusFormatter(data){
            var result='-';
            if(data.bmslost===0 && data.isBatteryAlarm != null){
                this.batteryStatusData.forEach(obj=>{
                    if(obj.value == data.isBatteryAlarm){
                        result = obj.code;
                    }
                })
            }else{
                result = this.$t('device.battery.statusNo')
            }
            return result;
        },
        async getTypeModelBySN(){
            let data = await this.API.getTypeModelBySN({
                inverterSN : this.inverterSN
            })
            let column_day=[]
            //是否显示详细报表
            this.detailVisible= data.roleFlag && data.roleFlag == 1 ?true :false
			//pvCount:pv个数  0||2||4
			if(data.pvCount == 2){
				column_day=[{
					title : this.$t('report.reportAnalys.js_report_idc1') + ' \n (A)',
					value : "idc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_idc2') + ' \n (A)',
					value : "idc2"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc1') + ' \n (V)',
					value : "vdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc2') + ' \n (V)',
					value : "vdc2"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc1') + ' \n (W)',
					value : "powerdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc2') + ' \n (W)',
					value : "powerdc2"
				}];
			}else if(data.pvCount == 3){
				column_day = [{
					title : this.$t('report.reportAnalys.js_report_idc1') + ' \n (A)',
					value : "idc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_idc2') + ' \n (A)',
					value : "idc2"
				},{
					title : this.$t('report.reportAnalys.js_report_idc3') + ' \n (A)',
					value : "idc3"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc1') + ' \n (V)',
					value : "vdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc2') + ' \n (V)',
					value : "vdc2"
				},{
					title : this.$t('report.reportAnalys.js_report_vdc3') + ' \n (V)',
					value : "vdc3"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc1') + ' \n (W)',
					value : "powerdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc2') + ' \n (W)',
					value : "powerdc2"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc3') + ' \n (W)',
					value : "powerdc3"
				},];
			}else if(data.pvCount == 4){
				column_day = [{
					title : this.$t('report.reportAnalys.js_report_idc1') + ' \n (A)',
					value : "idc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_idc2') + ' \n (A)',
					value : "idc2"
				},{
					title : this.$t('report.reportAnalys.js_report_idc3') + ' \n (A)',
					value : "idc3"
				}, {
					title : this.$t('report.reportAnalys.js_report_idc4') + ' \n (A)',
					value : "idc4"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc1') + ' \n (V)',
					value : "vdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc2') + ' \n (V)',
					value : "vdc2"
				},{
					title : this.$t('report.reportAnalys.js_report_vdc3') + ' \n (V)',
					value : "vdc3"
				}, {
					title : this.$t('report.reportAnalys.js_report_vdc4') + ' \n (V)',
					value : "vdc4"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc1') + ' \n (W)',
					value : "powerdc1"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc2') + ' \n (W)',
					value : "powerdc2"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc3') + ' \n (W)',
					value : "powerdc3"
				}, {
					title : this.$t('report.reportAnalys.js_report_powerdc4') + ' \n (W)',
					value : "powerdc4"
				}];
            }
            
            //判断单相还是三相：输出电流和输出电压
			if(data.phaseFlag == 1){//单
				//新增的需求，当为以下这些型号的时候表头为AC Current、AC Voltage
				if(data.inverterType == 11 || data.inverterType == 10 || data.inverterType == 4|| data.inverterType == 3){
					column_day.push( {
						title : this.$t('report.reportAnalys.js_report_single_iac1') + ' \n (A)',
						value : "iac1"
					}, {
						title : this.$t('report.reportAnalys.js_report_single_vac1') + ' \n (V)',
						value : "vac1"
					});
				}else{
					column_day.push({
						title : this.$t('report.reportAnalys.js_report_iac1') + ' \n (A)',
						value : "iac1"
					}, {
						title : this.$t('report.reportAnalys.js_report_vac1') + ' \n (V)',
						value : "vac1"
					});
				}
			}else if(data.phaseFlag == 2){//多
				column_day.push( {
					title : this.$t('report.reportAnalys.js_report_iac1') + ' \n (A)',
					value : "iac1"
				}, {
					title : this.$t('report.reportAnalys.js_report_iac2') + ' \n (A)',
					value : "iac2"
				}, {
					title : this.$t('report.reportAnalys.js_report_vac1') + ' \n (V)',
					value : "vac1"
				}, {
					title : this.$t('report.reportAnalys.js_report_vac2') + ' \n (V)',
					value : "vac2"
				});
			}else if(data.phaseFlag == 3){//多
				column_day.push( {
					title : this.$t('report.reportAnalys.js_report_iac1') + ' \n (A)',
					value : "iac1"
				}, {
					title : this.$t('report.reportAnalys.js_report_iac2') + ' \n (A)',
					value : "iac2"
				}, {
					title : this.$t('report.reportAnalys.js_report_iac3') + ' \n (A)',
					value : "iac3"
				}, {
					title : this.$t('report.reportAnalys.js_report_vac1') + ' \n (V)',
					value : "vac1"
				}, {
					title : this.$t('report.reportAnalys.js_report_vac2') + ' \n (V)',
					value : "vac2"
				}, {
					title : this.$t('report.reportAnalys.js_report_vac3') + ' \n (V)',
					value : "vac3"
				});
            }
            
            if(data.classify == 1&&(data.inverterType !=10 && data.inverterType !=11)){//深圳机需要展示下列字段
				//新增需求，当为A1-hybrid、A1-FIT这些的机型的时候不显示
				column_day.push({
                    title : this.$t('report.reportAnalys.js_report_genFreq') + ' \n (Hz)',
                    value : "genFreq"
                }, {
                    title : this.$t('report.reportAnalys.js_report_genPower') + ' \n (W)',
                    value : "genPower"
                }, {
                    title : this.$t('report.reportAnalys.js_report_genL1Vol') + ' \n (V)',
                    value : "genL1Vol"
                }, {
                    title : this.$t('report.reportAnalys.js_report_genL2Vol') + ' \n (V)',
                    value : "genL2Vol"
                }, {
                    title : this.$t('report.reportAnalys.js_report_loadCurrL1N') + ' \n (A)',
                    value : "loadCurrentL1N"
                }, {
                    title : this.$t('report.reportAnalys.js_report_loadCurrL2N') + ' \n (A)',
                    value : "loadCurrentL2N"
                }, {
                    title : this.$t('report.reportAnalys.js_report_loadVoltL1N') + ' \n (V)',
                    value : "loadVoltL1N"
                }, {
                    title : this.$t('report.reportAnalys.js_report_loadVoltL2N') + ' \n (V)',
                    value : "loadVoltL2N"
                });
			}
			
            column_day.push( {
                title : this.$t('report.reportAnalys.js_report_gridpower') + ' \n (W)',
                value : "gridpower"
            }, {
                title : this.$t('report.reportAnalys.js_report_feedinpower') + ' \n (W)',
                value : "feedinpower"
            }, {
                title : this.$t('report.reportAnalys.js_report_yieldtoday') + ' \n (kWh)',
                value : "yieldtoday"
            }, {
                title : this.$t('report.reportAnalys.js_report_yieldtotal') + ' \n (kWh)',
                value : "yieldtotal"
            }, {
                title : this.$t('report.reportAnalys.js_report_feedinenergy') + ' \n (kWh)',
                value : "feedinenergy",
                min_width:150
            }, {
                title : this.$t('report.reportAnalys.js_report_consumeenergy') + ' \n (kWh)',
                value : "consumeenergy",
                min_width:150
            }, {
                title : this.$t('report.inverterStatue') + ' \n ',
                value : "inverterStatus",
                slot:"inverterStatus",
                min_width:150
            } );
            if(data.battery == 1){
                column_day.push( {
                    title : this.$t('report.reportAnalys.js_report_battery_status') + ' \n ',
                    value : "isBatteryAlarm",
                    slot: "isBatteryAlarm",
                    min_width:100
                });
            }
            column_day.push( {
                title : this.$t('report.reportAnalys.js_report_uploadTimeValue') + ' \n ',
                value : "uploadTimeValue",
                min_width:150
            });
            this.column_day=column_day
            this.initTable()
        },
        async initTable(){
            let timeFormat;
            if(this.type==1){
                this.column=this.column_day
                timeFormat=this.$options.filters['dateFormat'](this.time,'YYYY-MM-DD')
            }else if(this.type==2){
                this.column=this.column_month
                this.column[0].title=this.$t('report.reportAnalys.js_report_daily')
                timeFormat=this.$options.filters['dateFormat'](this.time,'YYYY-MM')
            }else if(this.type==3){
                this.column=this.column_month
                this.column[0].title=this.$t('report.reportAnalys.js_report_month')
                timeFormat=this.$options.filters['dateFormat'](this.time,'YYYY')
            }
            
            this.flag=true
            this.loading = true
            var params={
                type : this.type,
                siteId : this.siteId,
                time : timeFormat,
                inverterSn : this.inverterSN,
                firmId : this.firmId,
                wifiSN : this.wifiSn,
                // userId : this.userId,
                webTime : this.webTime
            }
            let res = await this.API.getReportData(params)
            this.flag=false
            this.dataRows = res|| []
            this.loading = false
        },
        uploadPage(){
            this.initTable()
        },
        returnTypeCode(val){
            let res
            this.typeList.forEach(item=>{
                if(val==item.value){
                    res = item.code
                }
            })
            return res
        },
        query(){
            this.current = 1
            this.initTable()
        },
        changeType(){
            this.time=this.$options.filters['dateFormat'](new Date())
            this.query()
        },
        exportReport(val){
            this.exportType = val
            if(this.exportType==2){
                this.$store.commit('setVisibleShow2',true)
            }else{
                if (this.type == 1) {
                    this.$store.commit('setVisibleShow2',true)
                }else{
                    this.exportFun()
                }
            }
        },
        async exportFun(){
            this.$store.commit('setVisibleShow2',false)
            let url=''
            if(this.exportType==1){
                url='/export/siteReportExcel'
            }else if(this.exportType==2){
                url='/export/clockSiteReportExcel'
            }else if(this.exportType==3){
                url='/export/siteDetailReportExcel'
            }
            let params={//导出公用参数
                    type:this.type,
                    firmId:this.firmId,
                    webTime:this.webTime,
                    inverterSn:this.inverterSN,
                    siteId:this.siteId
                }
            if(this.exportType==2){//整点导出
                params.beginTime=this.beginTime
            }else{
                if (this.type == 1) {
                    params.beginTime=this.dateRange.beginTime
                    params.endTime=this.dateRange.endTime
                }else if (this.type == 2) {
                    params.time=moment(this.time).format('YYYY-MM')
                }else if (this.type == 3) {
                    params.time=moment(this.time).format('YYYY')
                }
            }
            this.comm.windowOpen(url,params)
        }
    },
};
</script>

<style lang="less">
.report-container{
    .el-table{
        .el-table__header{
            .cell{
                    white-space: pre-line;
                    text-align: center;
                    // width: max-content;
                    z-index: 10;
                }
        }
    } 
}

</style>
